﻿@page "/tree-grid/columnchooser"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids

@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the Tree Grid column chooser feature. Click the column chooser icon in the toolbar to open column chooser and you can select columns to hide/show from the checkbox list. </p>
</SampleDescription>
<ActionDescription>
    <p>The Tree Grid columns can be shown/hidden dynamically by using column chooser functionality. To enable column chooser, set the <code><a>ShowColumnChooser</a></code> property as true. You can also prevent the display of a column in column chooser by setting <code><a>ShowInColumnChooser</a></code> as false in the columns definition.</p>
    <p>In this demo, when the user clicks column chooser icon from the toolbar, the column chooser menu will open. Here, the user can show or hide the columns by changing the state of the checkbox.</p>
    <p>More information on the column chooser can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/columns/#column-chooser'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid height="315" DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" AllowPaging="true" TreeColumnIndex="1" ShowColumnChooser="true" Toolbar="@( new List<string>() { "ColumnChooser"})">
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145" ShowInColumnChooser="false"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="130" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="EndDate" HeaderText="End Date" Format="d" Type=ColumnType.Date Width="130" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="120" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="110"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().ToList();
    }
}
